<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>动态时间</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script>
			function showTime() {
				var time = new Date(); /*获取当前时间 年月日时分秒*/
				var y = time.getFullYear();
				var mon = time.getMonth() + 1; //0-11 
				var d = time.getDate();
				var h = time.getHours();
				var m = time.getMinutes();
				var s = time.getSeconds();
				/*向div中插入内容   年月日时分秒  val()只能用在表单中*/
				$("#myTime").html(y + "年" + mon + "月" + d + "日 " + h + ":" + m + ":" + s);
			}

			function showTime2() {
				var time = new Date();
				var y = time.getFullYear();
				var mon = time.getMonth() + 1; //0-11 
				var d = time.getDate();
				var h = time.getHours();
				var m = time.getMinutes();
				var s = time.getSeconds();
				$("#myTime2").html(y + "年" + mon + "月" + d + "日 " + h + ":" + m + ":" + s);
				clock2 = window.setTimeout("showTime2()", 1000);/*递归实现定时器*/
			}
			
			//setTimeout只能定时执行唯一一次，可使用递归达到定时器效果
			var clock2 = window.setTimeout("showTime2()", 1000);
			
			
			//页面加载事件 
			$(function() {
				//定时器 
				var clock1 = window.setInterval("showTime()", 1000);
				$("#btn1").click(function() {
					window.clearInterval(clock1);
				});
				$("#btn2").click(function() {
					window.clearTimeout(clock2);
				});
			});
		</script>
	</head>
	<body>
		<button id="btn1">停止</button>
		<div id="myTime"> </div>
		<button id="btn2">停止2</button>
		<div id="myTime2"> </div>
	</body>

</html>